<template>
    <div class="opt-control" :style="'right:'+position.right">
        <div class="opt-compass">
            <div class="directions">
                <button class="north" @mousedown="handleControl(7)" @mouseup="handleMoveStop()">
                   <!-- <i class="el-icon-caret-top"></i> -->
                   <!-- <a-icon type="up" /> -->
                   <a-icon type="caret-up" />
                </button>
                <button class="west" @mousedown="handleControl(4)" @mouseup="handleMoveStop()">
                   <!-- <i class="el-icon-caret-right"></i> -->
                   <!-- <a-icon type="right" /> -->
                   <a-icon type="caret-right" />
                </button>
                <button class="center" @click="handleMode()"></button>
                <button class="east" @mousedown="handleControl(3)" @mouseup="handleMoveStop()">
                   <!-- <i class="el-icon-caret-left"></i> -->
                   <!-- <a-icon type="left" /> -->
                   <a-icon type="caret-left" />
                </button>
                <button class="south" @mousedown="handleControl(8)" @mouseup="handleMoveStop()">
                   <!-- <i class="el-icon-caret-bottom"></i> -->
                   <!-- <a-icon type="down" /> -->
                   <a-icon type="caret-down" />
                </button>
            </div>
        </div>
        <div class="opt-zoom">
            <button @click="handleZoomIn()">
                <!-- <i class="el-icon-plus"></i> -->
                <a-icon type="plus" />
            </button>
            <button @click="handleZoomOut()">
                <!-- <i class="el-icon-minus"></i> -->
                <a-icon type="minus" />
            </button>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import mapService from '@src/utils/mapService'

export default {
	name: 'Control',
	computed: {
			...mapGetters(['']),
    },
    props:['position'],
    components:{
    },
	data() {
		return {
			minZoom: null,
			maxZoom: null,
			zoom: null,
			bearing: null,
			pitch: null,
		}
	},
	mounted() {
			
	},
	methods: {
		handleMode() {
				
		},
		handleControl(val) {
			var msg = {
                "service_id" : "camera.camera_ctrl.camera_move",
                "dir" : val
			}
			mapService.sendService(msg);
        },
		handleZoomIn() {
			var msg = {
                "scale" : 2,
                "service_id" : "camera.camera_ctrl.zoom_in"
			}
			mapService.sendService(msg);
		},
		handleZoomOut() {
			var msg = {
				"scale" : 2,
				"service_id" : "camera.camera_ctrl.zoom_out"
			}
			mapService.sendService(msg);
        },
        handleMoveStop(){
			var msg = {
                "service_id" : "camera.camera_ctrl.camera_move_stop"
			}
			mapService.sendService(msg);
        }
	}
}
</script>

<style lang="less" scoped>
.opt-control {
    position: absolute;
    right: 470px;
    bottom: 52px;
    z-index: 99;
    display: flex;
    flex-flow: row;
    user-select: none;
    transition: all .1s;
    button {
        border: none;
        cursor: pointer;
        padding: 0;

        &:hover,
        &:active,
        &:focus {
            outline: none;
        }

        &:hover {
            opacity: .7;
        }
    }

    .opt-compass {
        display: inline-block;
        width: 92px;
        height: 92px;
        background: transparent url('../assets/img/control/compass.png') no-repeat center;
        background-size: 92px 92px;

        .directions {
            width: 100%;
            height: 100%;
            position: relative;

            button {
                position: absolute;
                background-color: transparent;
            }
        }

        button.north,
        button.south {
            width: 26px;
            height: 18px;
            color: #cccccc;
            left: 50%;
            transform: translateX(-50%);
        }

        button.north {
            top: 12px;
        }

        button.south {
            bottom: 16px;
        }

        button.east,
        button.west {
            width: 16px;
            height: 32px;
            color: #cccccc;
            top: 50%;
            transform: translateY(-50%);
        }

        button.east {
            left: 14px;
        }

        button.west {
            right: 14px;
        }

        button.center {
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            transform: translateX(-50%) translateY(-50%);
            background: transparent url(../assets/img/control/3D.png) no-repeat center;
            background-size: 24px;
            &:hover{
                opacity: 1;
            }
            &.pitch {
                background-image: url(../assets/img/control/2D.png);
                background-size: 24px;
            }
        }
    }

    .opt-zoom{
        width: 32px;
        height: 64px;
				margin-left: 15.5px;
				margin-top: 28px;
				background: url('../assets/img/control/bg.png');
				background-size: 100% 100%;
				position: relative;
				&::after{
					content:'';
					position: absolute;
					top: 50%;
					left: 0;
					width: 100%;
					height: 2px;
					margin-top: -1px;
					background: url('../assets/img/control/split.png') center center no-repeat;
				}
				& button{
					width: 32px;
					height: 32px;
					background: transparent;
					& i{
						color:#fff;
						font-size: 20px;
					}
					// &:nth-of-type(1){
					// 	background: url('../assets/img/control/zoom-in.png');
					// 	background-size: 100% 100%;
					// }
					// &:nth-of-type(2){
					// 	background: url('../assets/img/control/zoom-out.png');
					// 	background-size: 100% 100%;
					// }
				}

    }
}
</style>
